<template>
  <el-dialog
    class="PredictionInfoAdd"
    title="添加超前地质预报数据"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form :inline="true" class="demo-form-inline" ref="form" :model="form" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="预报开始里程"
            prop="startMileage"
            :rules="[
      { required: true, message: '请输入预报开始里程', trigger: 'blur' }
    ]"
          >
            <el-input v-model="form.startMileage"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="预报结束里程"
            label-width="110px"
            prop="endMileage"
            :rules="[
      { required: true, message: '请输入预报结束里程', trigger: 'blur' }
    ]"
          >
            <el-input v-model="form.endMileage"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="设计围岩级别" :rules="[
      { required: true, message: '请输入围岩级别', trigger: 'blur' }
    ]">
            <el-input v-model="form.surroundGrade"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预报级别" :rules="[
      { required: true, message: '请输入预报级别', trigger: 'blur' }
    ]">
            <el-input v-model="form.predictionGrade"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="预报手段" :rules="[
      { required: true, message: '请选择预报手段', trigger: 'blur' }
    ]">
            <el-select style="width:100%" v-model="form.predictionType" placeholder="请选择预报手段">
              <el-option label="TSP" value="TSP"></el-option>
              <el-option label="地质雷达" value="地质雷达"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报告编号" :rules="[
      { required: true, message: '请输入报告编号', trigger: 'blur' }
    ]">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否有不良地质体" :rules="[
      { required: true, message: '请选择是否有不良地质体', trigger: 'blur' }
    ]">
            <el-radio v-model="form.result" @click.native="chooseIdClick(2)" label="1">是</el-radio>
            <el-radio v-model="form.result" @click.native="chooseIdClick(1)" label="2">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预报结果" :rules="[
      { required: true, message: '请输入预报结果', trigger: 'blur' }
    ]">
            <el-input type="textarea" v-model="form.predictionResult"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="showClass">
        <el-col :span="12">
          <el-form-item label="不良地质体描述">
            <el-input v-model="form.geology"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="不良地质体长度">
            <el-input  v-model="form.geologyLength"  placeholder="请输入米数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="创建时间" :rules="[
      { required: true, message: '请输入创建时间', trigger: 'blur' }
    ]">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              v-model="form.predictionTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报告附件">
            <el-upload
              name="file"
              class="upload-demo"
              action="string"
              :http-request="beforeAvatarUploadThree"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-success="handlesuccess"
              :on-error="handleerror"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="create">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from '../../../api'
import qs from 'qs'

export default {
  data() {
    return {
      showClass:false,
      wId: '',
      fileList: [],
      dialogVisible: false,
      tunnelList: [],
      form: {
        wId: '', //洞幅道id
        startMileage: '',
        endMileage: '',
        surroundGrade: '', //围岩等级
        designGrade: '', //设计级别
        predictionGrade: '', //预报级别
        predictionType: '', //预报手段
        predictionTime: '', //预报时间
        predictionResult: '', //预报结果
        remarks: '',
        resources: '',
        geology:"",//不良地质体，
        geologyLength:0.0
      },
      src: null,
      pageNum: 1,
      flag: false
    }
  },
  mounted() {
    // 查询隧道
    this.fundByTunnelInfo()
    this.$bus.$on('onAddPredictionWid', (flag) => {
      this.form.wId = flag
    })
    this.$bus.$on('onAddPredictionAdd', (flag) => {
      if (this.form.wId == '') {
        this.$message({
          type: 'fail',
          message: '请选择洞幅'
        })
        this.dialogVisible = false
      } else {
        this.dialogVisible = true
      }
    })
  },
  methods: {
    fundByTunnelInfo() {
      api
        .tunnelInfoFindByAll()
        .then((res) => {
          if (res.data.code == 2001) {
            this.tunnelList = res.data.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    create() {
      if (this.form.wId == '') {
        this.$message({
          type: 'fail',
          message: '请选择洞幅'
        })
        return
      }
      if (this.form.startMileage == '') {
        this.$message({
          type: 'fail',
          message: '请选择预报开始里程'
        })
        return
      }
      if (this.form.endMileage == '') {
        this.$message({
          type: 'fail',
          message: '请选择预报结束里程'
        })
        return
      }

      api
        .advanceInfosave(qs.stringify(this.form))
        .then((res) => {
          if (res.data.code == 2001) {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.dialogVisible = false
            this.$bus.$emit('onRefreshPrediction', this.form.wId)
          } else {
            this.$message({
              type: 'fail',
              message: res.data.message
            })
          }
        })
        .catch((err) => {})
    },
    onSubmit() {
      console.log('submit!')
    },
    handlesuccess(response, file, fileList) {
      console.log(response)
      if (response.code == 2001) {
        this.form.resources = response.data
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleerror(err, file, fileList) {
      console.log(err)
    },
    beforeAvatarUploadThree(file) {
      let params = new FormData()
      params.append('file', file.file)
      api
        .AddrPlaneFileUpload(params)
        .then((res) => {
          if (res.data.code == 2001) {
            this.form.resources = res.data.data
          }
        })
        .catch((err) => {})
    },
    chooseIdClick(val){
      if (val == 1) {
        this.showClass = false
      } else {
        this.showClass = true
      }
    }
  }
}
</script>

<style scoped>
.weiyan {
  border-radius: 10px;
  background-color: #f6f6f6;
  width: 95%;
  margin: 20px;
  padding: 30px;
}

.dixiashui {
  border-radius: 10px;
  background-color: #f6f6f6;
  width: 95%;
  margin: 20px;
  padding: 30px;
}

.teshu {
  border-radius: 10px;
  background-color: #f6f6f6;
  width: 95%;
  margin: 20px;
  padding: 30px;
}

h3 {
  text-align: left;
  margin-left: 20px;
}

.qita {
  border-radius: 10px;
  background-color: #f6f6f6;
  width: 95%;
  margin: 20px;
  padding: 30px;
}
.PredictionInfoAdd :deep(.el-input--suffix .el-input__inner){
  width: 202px;
}
.PredictionInfoAdd :deep(.el-textarea__inner){
  width: 202px;
}
.PredictionInfoAdd :deep(.el-form--inline .el-form-item__content){
  width: 202px;
}
</style>